<!-- 登录弹窗 -->
<template>
  <wd-popup
    v-model="popupVisible"
    :position="position"
    :custom-style="customStyleStr"
    :z-index="9999"
  >
    <view class="c-popup">
      <view class="c-popup__header">
        <view class="c-popup__header__left">
          <slot name="left"></slot>
        </view>
        <view class="c-popup__header__title">{{ title }}</view>
        <view class="c-popup__header__close">
          <wd-icon
            name="close"
            size="29rpx"
            v-if="showClose"
            @click="popupVisible = false"
          ></wd-icon>
        </view>
      </view>
      <slot />
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { PopupType } from 'wot-design-uni/components/wd-popup/types';
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    position: {
      type: String as PropType<PopupType>,
      default: 'bottom',
    },
    customStyle: {
      type: Object,
      default: {},
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const customStyleStr = ref('');
  const popupVisible = ref(false);
  watch(
    () => props.modelValue,
    (val) => {
      popupVisible.value = val;
    },
    { immediate: true },
  );
  watch(
    () => popupVisible.value,
    (val) => {
      emit('update:modelValue', val);
    },
  );
  watch(
    () => props.customStyle,
    (val) => {
      let str = '';
      Object.keys(val).forEach((key) => {
        str += `${key}:${val[key]}`;
      });
      customStyleStr.value = 'border-radius: 16rpx;' + str;
    },
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .c-popup {
    padding: 40rpx 32rpx;
    &__header {
      display: flex;
      align-items: center;
      &__left,
      &__close {
        width: 50px;
        flex-shrink: 0;
      }
      &__close {
        text-align: right;
      }
      &__title {
        flex: 1 0 0;
        text-align: center;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
</style>
